<script setup>
import { get } from '@/request/request';
import { onShow, onReachBottom } from '@dcloudio/uni-app';
import { ref } from 'vue';

const moneyHistory = ref({ list: [] });
const moneyForm = ref({
  page: 1, size: 10
});
const isEmpty = ref(false);

onShow(() => {
  moneyHistoryList();
});

const moneyHistoryList = () => {
  get('/get_withdrawal', moneyForm.value, { sessionKey: uni.getStorageSync("sessionKey") }).then(res => {
    const { data } = res;
    if (data.list && data.list.length > 0) {
      moneyHistory.value.list = moneyHistory.value.list.concat(data.list);
    } else {
      isEmpty.value = true;
    }
    console.log('moneyHistoryList', data);
  }).catch(err => {
    console.error('获取数据失败:', err);
  });
};

onReachBottom(() => {
  if (!isEmpty.value) {
    moneyForm.value.page += 1;
    moneyHistoryList();
  }
});
</script>

<template>
  <view class="money-history">
    <view class="money-history-item">
      <view class="history-item-box" v-for="(item, index) in moneyHistory.list" :key="index">
        <view>
          <view>
            <view>{{ item.appMethodName }}</view>
            <view></view>
          </view>
          <view style="font-size: 20rpx;color: #6666">提现账户：{{ item.userName }}</view>
          <view style="font-size: 20rpx;color: #6666">提现时间：{{ item.createTime }}</view>
        </view>
        <view style="text-align: center;">
          <view>-{{ item.money }}</view>
          <view style="font-size: 20rpx;color: #6666" >手续费：{{ item.commission }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.money-history {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .money-history-item {
    margin: 20rpx;
    width: 686rpx;
    background: #fff;
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: column;
    padding: 20rpx;

    .history-item-box {
      width: 100%;
      height: 152rpx;
      border-bottom: #E7E7E7 1rpx solid;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .money-history-item-content {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }


}
</style>
